<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <el-card class="filter-container" shadow="never">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="时间范围" prop="dateRange">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="时间粒度" prop="timeType">
          <el-select v-model="queryParams.timeType" placeholder="请选择时间粒度" clearable>
            <el-option label="按天" value="day" />
            <el-option label="按周" value="week" />
            <el-option label="按月" value="month" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 核心指标展示 -->
    <el-card class="metrics-container" shadow="never">
      <div slot="header" class="clearfix">
        <span>核心指标概览</span>
      </div>
      <el-row :gutter="16">
        <el-col :span="4">
          <div class="metric-card">
            <div class="metric-value">{{ userMetrics.totalUsers || 0 }}</div>
            <div class="metric-label">总用户数</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="metric-card">
            <div class="metric-value">{{ userMetrics.activeUsers || 0 }}</div>
            <div class="metric-label">浏览活跃用户数</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="metric-card">
            <div class="metric-value">{{ userMetrics.orderUsers || 0 }}</div>
            <div class="metric-label">下单用户数</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="metric-card">
            <div class="metric-value">{{ userMetrics.payUsers || 0 }}</div>
            <div class="metric-label">付费用户数</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="metric-card">
            <div class="metric-value">¥{{ parseFloat(userMetrics.avgOrderAmount || 0).toFixed(2) }}</div>
            <div class="metric-label">平均订单金额</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="metric-card">
            <div class="metric-value">¥{{ parseFloat(userMetrics.totalRevenue || 0).toFixed(2) }}</div>
            <div class="metric-label">总收入</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 图表展示区域 -->
    <el-row :gutter="16" style="margin-top: 20px;">
      <!-- 用户活跃度趋势图 -->
      <el-col :span="12">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>用户浏览活跃度趋势</span>
            <div style="float: right; font-size: 12px; color: #999;">
              基于商品浏览记录统计
            </div>
          </div>
          <div id="activityTrendChart" style="width: 100%; height: 350px;"></div>
        </el-card>
      </el-col>

      <!-- 用户转化漏斗图 -->
      <el-col :span="12">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>用户转化漏斗</span>
          </div>
          <div id="conversionFunnelChart" style="width: 100%; height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" style="margin-top: 20px;">
      <!-- 用户地域分布热力图 -->
      <el-col :span="24">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>用户地域分布</span>
          </div>
          <div id="regionDistributionChart" style="width: 100%; height: 450px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户详情列表 -->
    <el-card class="table-container" shadow="never" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>用户详情列表</span>
      </div>

      <!-- 搜索和排序条件 -->
      <div class="search-sort-container">
        <el-row :gutter="16" type="flex" align="middle">
          <el-col :span="8">
            <div class="form-item">
              <label class="form-label">用户搜索</label>
              <el-input
                v-model="tableQueryParams.userName"
                placeholder="请输入用户名称或昵称进行模糊搜索"
                clearable
                size="small"
                prefix-icon="el-icon-search"
                @keyup.enter.native="getList"
                @clear="getList"
              />
            </div>
          </el-col>
          <el-col :span="5">
            <div class="form-item">
              <label class="form-label">排序字段</label>
              <el-select v-model="tableQueryParams.sortField" placeholder="选择排序字段" clearable size="small" @change="getList" style="width: 100%;">
                <el-option label="浏览次数" value="browseCount" />
                <el-option label="注册时间" value="createTime" />
                <el-option label="订单数量" value="orderCount" />
                <el-option label="消费金额" value="totalAmount" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="form-item">
              <label class="form-label">排序方式</label>
              <el-select v-model="tableQueryParams.sortOrder" placeholder="排序方式" clearable size="small" @change="getList" style="width: 100%;">
                <el-option label="从小到大" value="asc" />
                <el-option label="从大到小" value="desc" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-item">
              <label class="form-label" style="visibility: hidden;">操作</label>
              <el-button type="primary" icon="el-icon-search" size="small" @click="getList" style="width: 100%;">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 用户列表表格 -->
      <div class="table-wrapper">
        <el-table v-loading="loading" :data="userList" class="user-details-table">
          <el-table-column label="用户名称" align="center" prop="userName" min-width="140">
          </el-table-column>
          <el-table-column label="用户昵称" align="center" prop="nickName" min-width="140">
          </el-table-column>
          <el-table-column label="浏览次数" align="center" prop="browseCount" min-width="120" sortable>
            <template slot-scope="scope">
              <el-tag type="primary" size="small">{{ scope.row.browseCount || 0 }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="常用设备" align="center" prop="mainDeviceType" min-width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.mainDeviceType === 'mobile' ? 'success' : scope.row.mainDeviceType === 'pc' ? 'primary' : 'info'" size="small">
                {{ scope.row.mainDeviceType === 'mobile' ? '手机' : scope.row.mainDeviceType === 'pc' ? '电脑' : scope.row.mainDeviceType }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" align="center" prop="createTime" min-width="140" sortable>
            <template slot-scope="scope">
              <div class="create-time">{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</div>
            </template>
          </el-table-column>
          <el-table-column label="所在省份" align="center" prop="province" min-width="120">
            <template slot-scope="scope">
              <el-tag type="info" size="small">{{ scope.row.province || '未知' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单数量" align="center" prop="orderCount" min-width="120" sortable>
            <template slot-scope="scope">
              <el-tag :type="scope.row.orderCount > 0 ? 'success' : 'info'" size="small">{{ scope.row.orderCount || 0 }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="totalAmount" label="消费金额" min-width="140" align="center" sortable>
            <template slot-scope="scope">
              <div class="amount-info">
                <span class="amount">¥{{ parseFloat(scope.row.totalAmount || 0).toFixed(2) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userStatus" label="状态" min-width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.userStatus === '正常' ? 'success' : 'danger'" size="small">
                {{ scope.row.userStatus }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="tableQueryParams.pageNum"
          :limit.sync="tableQueryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserMetrics, getUserActivityTrend, getUserRegionDistribution, getUserConversionFunnel, getUserDetails } from "@/api/statistics/userAnalyse";
import * as echarts from 'echarts';

export default {
  name: "UserStatistics",
  data() {
    return {
      // 加载状态
      loading: true,
      // 是否显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户列表
      userList: [],
      // 用户核心指标
      userMetrics: {},
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        timeType: 'day'
      },
      // 表格查询参数
      tableQueryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        sortField: null,
        sortOrder: null
      },
      // 图表实例
      activityTrendChart: null,
      conversionFunnelChart: null,
      regionDistributionChart: null
    };
  },
  created() {
    this.getMetrics();
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      // 确保DOM元素存在后再初始化图表
      setTimeout(() => {
        this.initCharts();
        this.getActivityTrend();
        this.getConversionFunnel();
        this.getRegionDistribution();
      }, 100);
    });
  },
  beforeDestroy() {
    if (this.activityTrendChart) {
      this.activityTrendChart.dispose();
    }
    if (this.conversionFunnelChart) {
      this.conversionFunnelChart.dispose();
    }
    if (this.regionDistributionChart) {
      this.regionDistributionChart.dispose();
    }
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    /** 查询用户核心指标 */
    getMetrics() {
      const params = this.getQueryParams();
      getUserMetrics(params).then(response => {
        this.userMetrics = response.data || {};
        console.log('用户核心指标:', this.userMetrics);
      }).catch(error => {
        console.error('获取用户核心指标失败:', error);
        this.$message.error('获取用户核心指标失败');
      });
    },
    /** 查询用户活跃度趋势 */
    getActivityTrend() {
      const params = this.getQueryParams();
      getUserActivityTrend(params).then(response => {
        console.log('用户活跃度趋势数据:', response.data);
        this.renderActivityTrendChart(response.data || []);
      }).catch(error => {
        console.error('获取用户活跃度趋势失败:', error);
        this.$message.error('获取用户活跃度趋势失败');
      });
    },
    /** 查询用户转化漏斗 */
    getConversionFunnel() {
      const params = this.getQueryParams();
      getUserConversionFunnel(params).then(response => {
        console.log('用户转化漏斗数据:', response.data);
        this.renderConversionFunnelChart(response.data || []);
      }).catch(error => {
        console.error('获取用户转化漏斗失败:', error);
        this.$message.error('获取用户转化漏斗失败');
      });
    },
    /** 查询用户地域分布 */
    getRegionDistribution() {
      const params = this.getQueryParams();
      getUserRegionDistribution(params).then(response => {
        console.log('用户地域分布数据:', response.data);
        this.renderRegionDistributionChart(response.data || []);
      }).catch(error => {
        console.error('获取用户地域分布失败:', error);
        this.$message.error('获取用户地域分布失败');
      });
    },
    /** 查询用户详情列表 */
    getList() {
      this.loading = true;
      const params = this.getTableQueryParams();
      getUserDetails(params).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 初始化图表 */
    initCharts() {
      // 确保DOM元素存在
      const activityElement = document.getElementById('activityTrendChart');
      const funnelElement = document.getElementById('conversionFunnelChart');
      const regionElement = document.getElementById('regionDistributionChart');

      if (activityElement) {
        this.activityTrendChart = echarts.init(activityElement);
      }
      if (funnelElement) {
        this.conversionFunnelChart = echarts.init(funnelElement);
      }
      if (regionElement) {
        this.regionDistributionChart = echarts.init(regionElement);
      }

      // 添加窗口大小变化监听
      this.handleResize = () => {
        if (this.activityTrendChart) this.activityTrendChart.resize();
        if (this.conversionFunnelChart) this.conversionFunnelChart.resize();
        if (this.regionDistributionChart) this.regionDistributionChart.resize();
      };
      window.addEventListener('resize', this.handleResize);
    },
    /** 获取查询参数 */
    getQueryParams() {
      let params = {
        ...this.queryParams
      };
      if (null != this.dateRange && '' != this.dateRange) {
        params.startDate = this.dateRange[0];
        params.endDate = this.dateRange[1];
      }
      return params;
    },
    /** 获取表格查询参数 */
    getTableQueryParams() {
      let params = {
        ...this.tableQueryParams
      };
      if (null != this.dateRange && '' != this.dateRange) {
        params.startDate = this.dateRange[0];
        params.endDate = this.dateRange[1];
      }
      return params;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getMetrics();
      this.getActivityTrend();
      this.getConversionFunnel();
      this.getRegionDistribution();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.timeType = 'day';
      this.handleQuery();
    },
    /** 重置表格查询 */
    resetTableQuery() {
      this.tableQueryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        sortField: null,
        sortOrder: null
      };
      this.getList();
    },
    /** 渲染用户活跃度趋势图 */
    renderActivityTrendChart(data) {
      if (!this.activityTrendChart || !data || data.length === 0) {
        console.warn('活跃度趋势图表未初始化或数据为空');
        return;
      }

      const option = {
        title: {
          text: '用户浏览活跃度趋势',
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {
            const data = params[0];
            return `日期: ${data.name}<br/>浏览活跃用户数: ${data.value}人`;
          }
        },
        legend: {
          data: ['浏览活跃用户数'],
          top: 35
        },
        grid: {
          left: '8%',
          right: '4%',
          bottom: '12%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => item.date),
          name: '时间轴',
          nameLocation: 'middle',
          nameGap: 30,
          nameTextStyle: {
            fontSize: 12,
            color: '#666'
          },
          axisLabel: {
            rotate: 0,
            fontSize: 11,
            margin: 10
          },
          axisLine: {
            lineStyle: {
              color: '#e6e6e6'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '浏览活跃用户数（人）',
          nameLocation: 'middle',
          nameGap: 60,
          nameRotate: 90,
          nameTextStyle: {
            fontSize: 12,
            color: '#666'
          },
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#f0f0f0'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#e6e6e6'
            }
          }
        },
        series: [
          {
            name: '浏览活跃用户数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                  { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
                ]
              }
            },
            itemStyle: {
              color: '#409EFF'
            },
            lineStyle: {
              width: 3,
              color: '#409EFF'
            },
            emphasis: {
              focus: 'series',
              scale: true,
              itemStyle: {
                borderColor: '#409EFF',
                borderWidth: 2
              }
            },
            data: data.map(item => item.activeUsers || 0)
          }
        ],
        animation: true,
        animationDuration: 1500,
        animationEasing: 'cubicOut'
      };
      this.activityTrendChart.setOption(option);
    },
    /** 渲染用户转化漏斗图 */
    renderConversionFunnelChart(data) {
      if (!this.conversionFunnelChart || !data || data.length === 0) {
        console.warn('转化漏斗图表未初始化或数据为空');
        return;
      }

      // 确保数据按value降序排列（漏斗图必须这样）
      const sortedData = data.sort((a, b) => (parseInt(b.value || 0)) - (parseInt(a.value || 0)));
      
      const option = {
        title: {
          text: '用户转化漏斗',
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return `${params.name}<br/>用户数: ${params.value}<br/>占比: ${params.percent}%`;
          }
        },
        series: [
          {
            name: '用户转化',
            type: 'funnel',
            left: '15%',
            right: '15%',
            top: '15%',
            bottom: '15%',
            min: 0,
            max: Math.max(...sortedData.map(item => parseInt(item.value || 0)), 100),
            minSize: '20%',
            maxSize: '100%',
            sort: 'descending',
            orient: 'vertical',
            gap: 8,
            label: {
              show: true,
              position: 'inside',
              fontSize: 14,
              fontWeight: 'bold',
              color: '#fff',
              formatter: function(params) {
                return `${params.name}\n${params.value}`;
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2,
              color: function(params) {
                const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666'];
                return colors[params.dataIndex] || '#73c0de';
              }
            },
            emphasis: {
              label: {
                fontSize: 16,
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
            },
            data: sortedData.map(item => ({
              value: parseInt(item.value || 0),
              name: `${item.stage} (${item.rate})`
            }))
          }
        ],
        animation: true,
        animationDuration: 1500,
        animationEasing: 'cubicOut'
      };
      this.conversionFunnelChart.setOption(option);
    },
    /** 渲染用户地域分布图 */
    renderRegionDistributionChart(data) {
      if (!this.regionDistributionChart || !data || data.length === 0) {
        const emptyOption = {
          title: {
            text: '用户地域分布',
            left: 'center'
          },
          graphic: {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              text: '暂无数据',
              fontSize: 16,
              fill: '#999'
            }
          }
        };
        this.regionDistributionChart.setOption(emptyOption);
        return;
      }

      // 过滤掉"未知"地域数据，只显示有效的地域信息
      const filteredData = data.filter(item => {
        const region = item.region || item.province || '';
        return region && region !== '未知' && region.trim() !== '';
      });

      // 如果过滤后没有数据，显示暂无数据
      if (filteredData.length === 0) {
        const emptyOption = {
          title: {
            text: '用户地域分布',
            left: 'center'
          },
          graphic: {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              text: '暂无有效地域数据',
              fontSize: 16,
              fill: '#999'
            }
          }
        };
        this.regionDistributionChart.setOption(emptyOption);
        return;
      }

      // 使用水平柱状图显示地域分布，更美观和直观
      const provinces = filteredData.map(item => item.region || item.province || '未知');
      const userCounts = filteredData.map(item => parseInt(item.userCount || 0));

      const option = {
        title: {
          text: '用户地域分布排行榜',
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const data = params[0];
            return `${data.name}<br/>用户数: ${data.value.toLocaleString()}`;
          }
        },
        grid: {
          left: '15%',
          right: '10%',
          top: '15%',
          bottom: '10%',
          containLabel: false
        },
        xAxis: {
          type: 'value',
          name: '用户数',
          nameTextStyle: {
            fontSize: 12
          },
          axisLabel: {
            formatter: function(value) {
              return value >= 1000 ? (value / 1000).toFixed(1) + 'k' : value;
            }
          }
        },
        yAxis: {
          type: 'category',
          data: provinces,
          axisLabel: {
            fontSize: 11,
            interval: 0
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: '用户数',
            type: 'bar',
            data: userCounts,
            barWidth: '60%',
            itemStyle: {
              color: function(params) {
                // 根据数值大小生成不同颜色
                const maxValue = Math.max(...userCounts);
                const ratio = params.value / maxValue;
                if (ratio >= 0.8) return '#ff4757';
                if (ratio >= 0.6) return '#ffa726';
                if (ratio >= 0.4) return '#26a69a';
                if (ratio >= 0.2) return '#42a5f5';
                return '#78909c';
              },
              borderRadius: [0, 4, 4, 0]
            },
            emphasis: {
              itemStyle: {
                color: '#ff6b6b',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: 'right',
              formatter: function(params) {
                return params.value.toLocaleString();
              },
              fontSize: 10,
              color: '#666'
            }
          }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      };

      this.regionDistributionChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.user-analyse-container {
  padding: 20px;
}

.metrics-container {
  margin-bottom: 20px;
}

.metric-card {
  text-align: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.metric-label {
  font-size: 14px;
  color: #666;
}

.chart-container {
  margin-bottom: 20px;
}

.chart-wrapper {
  height: 400px;
  width: 100%;
}

.table-container {
  width: 100%;
  border-radius: 8px;
}

.table-container .el-card__body {
  padding: 0 !important;
}

.search-sort-container {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  margin: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.form-label {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
  font-weight: 500;
  line-height: 1;
}

.table-wrapper {
  width: calc(100% - 40px);
  overflow-x: auto;
  margin: 0 20px;
}

.user-details-table {
  border-radius: 6px;
  overflow: hidden;
  width: 100% !important;
  table-layout: auto;
}

.user-details-table .el-table__body-wrapper,
.user-details-table .el-table__header-wrapper {
  width: 100% !important;
}

.pagination-container {
  padding: 0 20px 20px 20px;
}

.user-info {
  text-align: left;
}

.user-name {
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.nick-name {
  font-size: 12px;
  color: #909399;
}

.create-time {
  font-size: 13px;
  color: #606266;
}

.amount-info {
  text-align: center;
}

.amount {
  font-weight: bold;
  color: #E6A23C;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-sort-container .el-col {
    margin-bottom: 10px;
  }
  
  .metric-value {
    font-size: 24px;
  }
  
  .chart-wrapper {
    height: 300px;
  }
}
</style>
